<script setup lang="ts">
defineOptions({
  name: "NIO"
});
import ExposureAnalysisHead from "./components/Head.vue";
import ExposureAnalysisMiddle from "./components/Middle.vue";
import WaterPolo from "./components/waterPolo.vue";
import PieLine from "./components/PieLine.vue";
import ActiveRing from "./components/ActiveRing.vue";
import Radar from "./components/radar.vue";
import Earth from "./components/earth/index.vue";
import CarAspect from "./components/CarAspect.vue";
import CarIntelligentDriving from "./components/CarIntelligentDriving.vue";
import CarUnderpan from "./components/CarUnderpan.vue";
import CarSecurity from "./components/CarSecurity.vue";
</script>

<template>
  <dv-full-screen-container>
    <div class="box">
      <div class="head">
        <ExposureAnalysisHead />
      </div>
      <div class="box-container">
        <div class="container-left">
          <dv-border-box-10 :color="['#3183b8', '#3183b8']">
            <WaterPolo />
          </dv-border-box-10>

          <dv-border-box-10 :color="['#3183b8', '#3183b8']">
            <PieLine />
          </dv-border-box-10>
        </div>
        <div class="container-center">
          <dv-border-box-10 :color="['#3183b8', '#3183b8']">
            <Earth />
          </dv-border-box-10>
        </div>
        <div class="container-right">
          <dv-border-box-10 :color="['#3183b8', '#3183b8']">
            <ActiveRing />
          </dv-border-box-10>
          <dv-border-box-10 :color="['#3183b8', '#3183b8']">
            <Radar />
          </dv-border-box-10>
        </div>
      </div>
      <div class="bottom">
        <div class="bottom-item">
          <dv-border-box-10 :color="['#3183b8', '#3183b8']">
            <CarAspect />
          </dv-border-box-10>
        </div>
        <div class="bottom-item">
          <dv-border-box-10 :color="['#3183b8', '#3183b8']">
            <CarIntelligentDriving />
          </dv-border-box-10>
        </div>
        <div class="bottom-item">
          <dv-border-box-10 :color="['#3183b8', '#3183b8']">
            <CarUnderpan />
          </dv-border-box-10>
        </div>
        <div class="bottom-item">
          <dv-border-box-10 :color="['#3183b8', '#3183b8']">
            <CarSecurity />
          </dv-border-box-10>
        </div>
      </div>
    </div>
  </dv-full-screen-container>
</template>

<style lang="scss" scoped>
$head-height: 4rem; //头部高度
$container-height: 45rem;
$gap: 1rem; //模块间距

.box {
  width: 100%;
  height: 100%;
  background: #0c1b2d no-repeat center center;
  background-size: 100% 100%;

  .head {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: $head-height;
  }

  .box-container {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr calc(1fr * 2.036) 1fr;
    gap: $gap;
    width: 100%;
    height: $container-height;
    padding: 20px;

    .container-left {
      display: grid;
      grid-template-rows: 1fr 1fr;
      gap: $gap;
    }

    .container-center {
      height: 100%;
    }

    .container-right {
      display: grid;
      grid-template-rows: 1fr 1fr;
      gap: $gap;
      height: 100%;

      .container-right-item {
        background-color: green;
      }
    }
  }

  .bottom {
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: $gap;
    width: 100%;
    height: calc(100% - $head-height - $container-height);
    padding: 20px;
  }
}
</style>
